import React from 'react';
import * as d3 from 'd3-shape';
import { Row, Col, Card, Button } from 'antd';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
} from 'recharts';
import Container from '../routes/PublicNumber/Container';

const cardinal = d3.curveCardinal.tension(0.2);
const CardinalAreaChart = ({ msg }) => (
  <div>
    <Card>
      <AreaChart
        data={msg}
        margin={{
          top: 10,
          right: 30,
          left: 0,
          bottom: 0,
        }}
      >
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
        <Area type={cardinal} dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
      </AreaChart>
    </Card>
  </div>
);
export default CardinalAreaChart;
